<template>
  <div>
	
	<myheader></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">	
			<table>
				<tr>
					<td style="padding:5px;">
						商品名称：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="name">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						商品简介：
					</td>
					<td style="padding:5px;">
						<quill-editor  ref="myTextEditor" :content="desc"></quill-editor>
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						商品标签：
					</td>
					<td style="padding:5px;">
						<TagInput v-model="mytags" type="string" split="," placeholder="请输入标签"></TagInput>
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						颜色：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="color">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						号码：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="size">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						季节：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="season">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						价格：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="price">
					</td>
				</tr>
				<!-- <tr>
					<td style="padding:5px;">
						头像上传：
					</td>
					<td style="padding:5px;">
						<input type="file" @change="upload">
					</td>
				</tr> -->
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<Button @click="submit" color='blue'>提交</Button>
					</td>
				</tr>
			</table>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader'
import myfooter from './myfooter'
import { config } from '../config'
// 调用富文本编辑器
import { quillEditor } from 'vue-quill-editor'
// 富文本编辑器外部引用样式  三种样式三选一引入即可
import 'quill/dist/quill.snow.css'
//import 'quill/dist/quill.core.css'
//import 'quill/dist/quill.bubble.css'
// 富文本基于quill
// import * as Quill from 'quill';

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '添加商品'}],
	  name: '',
	  desc: '',
	  color: '',
	  size: '',
	  season: '',
	  price: 0,
	  cate_id: 1,
	  // 商品标签
	  mytags: '',
	  // 存储编辑器信息
	  content: ''
    }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter,
	  quillEditor
  },

  mounted:function(){
	  
  },
  
  methods:{
	  // 提交
	  submit: function () {
		  // 拼接商品规格
		  var parms = {};
		  parms['color'] = this.color;
		  parms['size'] = this.size;
		  parms['season'] = this.season;

		  // console.log(parms);

		  // 格式化字符串
		  parms = JSON.stringify(parms);
		  // console.log(parms);

		  // 转换为json
		  // parms = JSON.parse(parms);
		  // console.log(parms);

		  // 发送请求
          this.axios.get("http://127.0.0.1:8000/insertgoods/",{
            params: {
              name: this.name,
			  desc: this.desc,
			  parms: parms,
			  price: this.price,
			  cate_id: this.cate_id
            }
          }).then(result => {
			console.log(result);
			this.$Message(result.data.message);

			// 只有商品入库成功，才添加标签

			this.axios.get("http://127.0.0.1:8000/inserttags/",{
            params: {
			  id: result.data.id,
              tags: this.mytags
            }
			}).then(result => {
				console.log(result);
				this.$Message(result.data.message);
			})
			})
        }
	  },

	  // 上传头像
	//   upload: function (e) {
	// 	// 获取文件对象
	// 	let file = e.target.files[0];

	// 	// 声明参数
	// 	let param = new FormData();

	// 	// 添加文件
	// 	param.append('file', file, file.name);

	// 	// 声明请求头
	// 	let config = {headers: {'Content-Type': 'multipart/form-data'}};

	// 	// 发送请求
	// 	this.axios.post('http://127.0.0.1:8000/uploadfile/', param, config)
	// 	.then((result) => {
	// 		console.log(result);

	// 		// 赋值操作
	// 		this.src = 'http://127.0.0.1:8000/static/upload/' + result.data.filename;
	// 	}) 
	//   }
}


</script>
 
<style>
.ql-editor{
	height: 100px;
}

</style>